<template>
  <a-row type="flex" style="flex-flow: inherit;">
    <a-col :flex="toggle ? '260px' : '30px'" style="margin-right: 12px;background-color: #fff;">
      <depart-tree :rootOpened="true" :multi="false" @ok="getTreeData" @toggleBool="toggleBool" />
      <!-- <groups-tree @tree="getTreeData" @selectedKeys="getSelectedKeys" /> -->
    </a-col>
    <a-col flex="auto">
      <a-card class="topBox" :bordered="false" style="margin-bottom: 10px">
        <!-- 查询区域 -->
        <!-- 查询区域 -->
        <!-- <div class="table-page-search-wrapper" style="position: relative"> -->
          <!-- <div class="search-wrapper-btn">
            <a-button type="link" @click="show = !show">
              <span v-if="!show">展开
                <a-icon type="down" />
              </span>
              <span v-else>收起
                <a-icon type="up" />
              </span>
            </a-button>
          </div> -->
          <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
            <a-row type="flex" justify="space-around">
            <a-col :span="6">
              <a-form-model-item label="人员姓名" >
                <a-input v-model="pageFilter.sjskPersonName" placeholder="请输入"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="人员类型">
                <a-select v-model="pageFilter.sjskType" placeholder="请选择" style="width:100%;">
                  <!-- <a-select-option value="0">全部</a-select-option> -->
                  <a-select-option value="1">社区戒毒</a-select-option>
                  <a-select-option value="2">社区康复</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="报告区间">
                <a-date-picker v-model="pageFilter.actualDetectEndTime" valueFormat="YYYY-MM-DD" style="width:100%;"
                  placeholder="请选择" />
              </a-form-model-item>
            </a-col>
            <a-col :span="5">
              <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
                <a-button type="primary" @click="onQuery"> 查询 </a-button>
                <a-button style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
          </a-form-model>
        <!-- </div> -->
      </a-card>
      <a-card :bordered="false">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button @click="onOut()">导出</a-button>
        </div>
        <!-- 表格展示 -->
        <div class="table-page-content">
          <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading"
            :columns="columns" :dataSource="pageData" @change="onTableChange">
            <template slot="sjskType" slot-scope="text">
              <span>{{sjskTypetoString(text)}}</span>
            </template>
            <template slot="action" slot-scope="text, record">
              <a-button @click="see(record)" type="link">查看</a-button> 
            </template>
            <template slot="detectNum" slot-scope="text">
              <span>{{text}}次</span>
            </template>
            <template slot="completeNum" slot-scope="text">
              <span>{{text}}次</span>
            </template>
          </z-table>
        </div>
      </a-card>
    </a-col>
    <AddModal ref="addModalId" @ok="onQuery" />
  </a-row>
</template>

<script>
import { getDictItemsFromCache } from '@/api/api'
import { downLoadFileReader } from '@/utils/export-util/util'
import * as returnVisitApi from '@/api/sjsk/help/returnVisit.js'
import AddModal from '@/views/sjsk/helpManage/returnVisit/modules/AddModal'
import DepartTree from '@/views/sjsk/modules/departTree'
import {completeReportList,completeReportListExportXls} from '@/api/sjsk/estimate/list/index'
export default {
  components: {
    DepartTree, AddModal
  },
  data() {
    return {
      // dta:{
      //   departmentId:''
      // },
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      show: false,
      loading: false,
      visible: false,
      reloading: false,
      // actualDetectTime: [],
      treeDatas: [],
      toggle: true,
      // typeArr: getDictItemsFromCache('personType'),
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '姓名',
          dataIndex: 'realName',
          align: 'center',
        },
        {
          title: '身份证号',
          dataIndex: 'identityCard',
          align: 'center',
        },
        {
          title: '人员类型',
          align: 'center',
          dataIndex: 'sjskType',
          scopedSlots: { customRender: 'sjskType' },
        },
        // {
        //   title: '杜戒杜康人员id',
        //   dataIndex: 'sjskPersonId',
        //   align: 'center',
        // },
        {
          title: '应报告次数',
          dataIndex: 'detectNum',
          align: 'center',
          scopedSlots: { customRender: 'detectNum' },
        },
        {
          title: '已报告次数',
          dataIndex: 'completeNum',
          align: 'center',
          scopedSlots: { customRender: 'completeNum' },
        },
        {
          title: '最新报告时间',
          dataIndex: 'actualDetectTime',
          align: 'center',
          // scopedSlots: { customRender: 'actualDetectTime' },
        },
        // {
        //   title: '取消/免除次数',
        //   dataIndex: 'cancelNum',
        //   align: 'center',
        // },
        {
          title: '操作',
          width: 150,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: [],
      departmentId: "",
    }
  },
  created() { },
  async mounted() {
    // this.onQuery()
  },
  // watch: {
  //   // 组织机构树-联动筛选人员列表
  //   'pageFilter.departmentId'(newVal, oldVal) {
  //     this.onQuery()
  //   }
  // },
  methods: {
    sjskTypetoString(text){
      if(text == 1){
        return '社区戒毒'
      }
      else{
        return '社区康复'
      }
    },
    see(record){
      // console.log(record.sjskPersonId);
      this.$router.push({
        path: '/periodicReport/record',
        query:{sjskid:record.sjskPersonId}
      })
    },
    onQuery() {
      this.pageFilter.pageNo = 1
      console.log(this.pageFilter);
      this.refreshTable()
    },
    onResetForm() {
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10,
        departmentId: this.departmentId
      }
      this.actualDetectTime = []
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      completeReportList(this.pageFilter).then((res) => {
        if (res.success) {
          this.pageData = res.result ? res.result : []
          this.loading = false
        } else {
          this.$message.warn(res.message)
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    // onTimeChange(date) {
    //   this.$set(this.pageFilter, 'actualDetectStartTime	', date[0])
    //   this.$set(this.pageFilter, 'actualDetectEndTime', date[1])
    // },
    // setTittle(text) {
    //   return this.$filterDictTextByCache('sjskType', text)  //现在字典中对应的文字，是全局函数
    // },
    onAdd(record) {
      this.$refs.addModalId.show(record)
    },
    // onHistory(record) {
    //   this.$router.push({
    //     path: '/periodicReport/record',
    //     query: {
    //       ceId: record.ceId,
    //       sopId: record.sopId,
    //       spId: record.spId
    //     }
    //   })
    // },
    onOut() {
      completeReportListExportXls(this.pageFilter).then(async res => {
        // console.log(res);
        const fileName = '报告记录.xls'
        await downLoadFileReader(res, fileName)
      })
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },
    // 选中组织架构树，赋值到人员列表搜索框
    getTreeData(datas, id) {
      if (id != undefined && id != null && id != "") {
        this.departmentId = id
        this.$set(this.pageFilter, 'departmentId', id)
        this.onQuery()
      }
    },
    toggleBool(bool) {
      // console.log(bool)
      this.toggle = bool
    }
  },
}
</script>

<style lang="less" scoped>
.topBox /deep/.ant-row {
  margin-bottom: 0;
}
/deep/.ant-col-7 {
  width: 28%;
}

/deep/.ant-col-4 {
  width: 16%;
  // margin-left: 20px;
}
.mode_item {
  display: flex;
  border-bottom: 1px #dadada dashed;

  .mode_item_div {
    width: 26%;
    padding: 5px 0;

    .ant-form-item {
      margin-bottom: 0;
    }
  }

  &>* {
    width: 100%;
    margin-bottom: 0;
    padding: 10px 0;
  }
}

.mode_item_flex {
  width: 50% !important;

  /deep/ .ant-col-6 {
    width: 19% !important;
  }
}

.search-wrapper-btn {
  position: absolute;
  right: 15%;
  top: 9px;
  z-index: 100;
}

.btnBox {
  position: absolute;
  right: 0;
  top: 5px;
  z-index: 120;
}

@import '~@assets/less/common.less';
</style>